<template>
	<custom-page :left-buttons="[]" title="首页" borderBottomColor="transparent" backgroundColor="#FFFFFF">
		<template #page>
			<view class="page-content">
				<view class="search-layout">
					<view class="city-row" @click="selectCityClick">
						<image class="location-img" :src="asserts.ic_address"></image>
						<view>昆明市</view>
					</view>
					<view class="input-layout" @click="searchAssistantClick">
						<image class="search-img" :src="asserts.ic_search"></image>
						<view class="input-content">查找助教</view>
					</view>
				</view>
				<view class="card-layout" v-if="isShowInfo">
					<swiper class="swiper" :circular="true">
						<swiper-item v-for="(item, index) in assistantListData">
							<view class="card-item" @click="assistantClick(item)">
								<image class="card-bg" v-if="getAddressIsVideo(item.userPicture)" :src="item.userPicture + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
								<image class="card-bg" v-else :src="item.userPicture" mode="aspectFill"></image>
								<view class="bottom-layout">
									<view class="assistant-layout">
										<assistant-computed-info type="avatar" :avatar="item.sculptureUrl"></assistant-computed-info>
										<view class="center-view">
											<view class="user-name-row">
												<view>{{item.name}}</view>
												<image :src="item.picture"></image>
											</view>
											<view class="sex-age-row">
												<assistant-computed-info type="sex" :sex="item.sex"></assistant-computed-info>
												<view v-if="item.age">{{item.age}}岁</view>
												<assistant-computed-info type="state" :state="item.orderReceivingState" :stateText="item.orderReceivingStateDesc"></assistant-computed-info>
											</view>
										</view>
										<view class="follow" v-if="false">关注</view>
									</view>
									<assistant-computed-info type="tag2" :labelDescList="item.labelDescList"></assistant-computed-info>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<no-more-holder class="card-layout" :image="asserts.ic_order_empty" v-else></no-more-holder>
			</view>
		</template>
		<template #popup>
			<app-update-popup ref="appUpdate"></app-update-popup>
		</template>
	</custom-page>
</template>

<script>
	import {
		compareVersion, getIsVideo
	} from '../../utils/utils.js'
	export default {
		computed: {
			getAddressIsVideo(){
				return (value)=> {
					return getIsVideo(value)
				}
			},
		},
		data() {
			return {
				assistantListData: [],
				isShowInfo: true,
			}
		},
		mounted() {
			this.requestCenter.getSystemConfig().then(res => {
				this.isShowInfo = res.formSupport
			})
			this.getAssistantList()
			
			// #ifdef APP-PLUS
			//版本更新
			this.updateApp()
			// #endif
		},
		methods: {
			//版本更新
			updateApp(){
				const systemInfo = uni.getSystemInfoSync();
				let appVersionCode = systemInfo.appVersion;
				this.requestCenter.getAppVersion().then(res => {
					if(compareVersion(res.appVersion, appVersionCode)>0){
						this.$refs.appUpdate.show()
					}
				})
			},
			
			//助教用户列表
			getAssistantList(){
				let params = {}
				this.requestCenter.getAssistantList(params).then(res => {
					this.assistantListData = res
				})
			},
			
			//选择城市
			selectCityClick(){
				this.$emit('selectCityBack')
			},
			//点击搜索
			searchAssistantClick(){
				if(this.isShowInfo){
					uni.navigateTo({
						url: '/pages/assistant-list/assistant-list'
					})
				}
			},
			
			//点击查看助教详情
			assistantClick(item){
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${item.userId}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.search-layout{
		width: 100%;
		height: 96rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
		color: #021624;
		font-size: 32rpx;
		.city-row{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.location-img{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		.input-layout{
			margin-left: 16rpx;
			flex: 1;
			height: 72rpx;
			background: #EEEEEE;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 2rpx solid #EAEAEA;
			display: flex;
			flex-direction: row;
			align-items: center;
			.search-img{
				width: 32rpx;
				height: 32rpx;
				margin-left: 48rpx;
				margin-right: 16rpx;
			}
			.input-content{
				flex: 1;
				font-size: 28rpx;
				color: #ABAFB7;
			}
		}
	}
	
	.card-layout{
		flex: 1;
		width: calc(100% - 32rpx);
		margin: 16rpx 16rpx 28rpx 16rpx;
		.swiper{
			height: 100%;
			width: 100%;
		}
		.card-item{
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			border-radius: 32rpx;
			position: relative;
			.card-bg{
				width: 100%;
				height: calc(100%);
				position: absolute;
				top: 0;
				z-index: -1;
				border-radius: 32rpx;
			}
			.bottom-layout{
				width: 100%;
				height: 400rpx;
				padding: 32rpx;
				border-radius: 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				background: linear-gradient(180deg, rgba(2,22,36,0) 0%, #021624 100%);
			}
			.assistant-layout{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 30rpx;
				.center-view{
					flex: 1;
					display: flex;
					flex-direction: column;
				}
				.user-name-row{
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #FFFFFF;
					font-size: 40rpx;
					line-height: 48rpx;
					margin-bottom: 8rpx;
					image{
						width: 136rpx;
						height: 48rpx;
						margin-left: 16rpx;
					}
				}
				.sex-age-row{
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #EEEEEE;
					font-size: 28rpx;
					.sex-img{
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
					}
					.circle{
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						color: #04BC5C;
						margin-left: 16rpx;
						margin-right: 8rpx;
					}
					.col-bg-04b{
						background-color: #04BC5C;
					}
					.col-bg-aba{
						background-color: #ABAFB7;
					}
					.col-04b{
						color: #04BC5C;
						font-size: 28rpx;
					}
					.col-aba{
						color: #ABAFB7;
						font-size: 28rpx;
					}
				}
				.follow{
					width: 176rpx;
					background-color: #FA384E;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>
